<template>
  <!--卫生期刊-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>

    <div style="margin: 10px;text-align: center;font-size: 18px;font-weight: bold">
      温馨提示：该页面为测试数据，正式网站只显示加入联盟的期刊！
    </div>

    <div class="wrapper">
      <!--期刊专业-->
      <div class="line">
        <Row>
          <i-col span="4">
            <h2 class="JournalProfessional">期刊分类</h2>
            <span class="spn1" @click="allClick1()" :class="{'active':all1.isActive}">{{all1.name}}</span>
          </i-col>
          <i-col span="20">
            <div class="label">
              <span v-for="(item,index) in JournalProfessional" class="spn" :class="{'active':item.isActive}"
                    @click="selected1(item,index)">
                 {{item.name}}
              </span>
              <div class="label" v-show="within">
                <span v-for="(item,index) in internalMedicine" class="spn" :class="{'active':item.isActive}"
                      @click="selected2(item,index)">
                 {{item.name}}
                </span>
              </div>
              <div class="label" v-show="outer">
                <span v-for="(item,index) in chirurgery" class="spn" :class="{'active':item.isActive}"
                      @click="selected3(item,index)">
                 {{item.name}}
                </span>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
      <!--刊发周期-->
      <div class="line">
        <Row>
          <i-col span="4">
            <h2 class="JournalProfessional">刊发周期</h2>
            <span class="spn1" @click="allClick2()" :class="{'active':all2.isActive}">{{all2.name}}</span>
          </i-col>
          <i-col span="20">
            <div class="label">
              <span v-for="(item,index) in period" class="spn" :class="{'active':item.isActive}"
                    @click="selected4(item,index)">
                 {{item.value}}
              </span>
            </div>
          </i-col>
        </Row>
      </div>
      <!--期刊等级-->
      <div class="line">
        <Row>
          <i-col span="4">
            <h2 class="JournalProfessional">期刊等级</h2>
            <span class="spn1" @click="allClick3()" :class="{'active':all3.isActive}">{{all3.name}}</span>
          </i-col>
          <i-col span="20">
            <div class="label">
              <span v-for="(item,index) in grade" class="spn" :class="{'active':item.isActive}"
                    @click="selected5(item,index)">
                 {{item.value}}
              </span>
            </div>
          </i-col>
        </Row>
      </div>
      <!--影响因子-->
      <div class="line">
        <Row>
          <i-col span="4">
            <h2 class="JournalProfessional">影响因子</h2>
            <!--            <span class="spn1" @click="allClick4()" :class="{'active':all4.isActive}">{{all4.name}}</span>-->
          </i-col>
          <i-col span="20">
            <div class="label">
              <span v-for="(item,index) in factorInfluence" class="spn" :class="{'active':index == isActive}"
                    @click="selected6(item,index)">
                 {{item.value}}
              </span>
            </div>
          </i-col>
        </Row>
      </div>
      <!--期刊核心-->
      <div class="line">
        <Row>
          <i-col span="4">
            <h2 class="JournalProfessional">期刊核心</h2>
            <span class="spn1" @click="allClick5()" :class="{'active':all5.isActive}">{{all5.name}}</span>
          </i-col>
          <i-col span="20">
            <div class="label">
              <span v-for="(item,index) in coreJournals" class="spn" :class="{'active':item.isActive}"
                    @click="selected7(item,index)">
                 {{item.name}}
              </span>
            </div>
          </i-col>
        </Row>
      </div>
      <!--已选择-->
      <div class="line">
        <Row>
          <i-col span="2">
            <h2 class="JournalProfessional">已选择</h2>
            <p class="JournalProfessional">
              <Button type="primary" @click="replacement">重置</Button>
            </p>
            <p class="JournalProfessional">
              <Button type="primary" @click="OK">确定</Button>
            </p>
          </i-col>
          <i-col span="22">
            <div class="label">
              <span class="spn span0" v-for="(item,index) in allowList1">
                {{item.name}}
                <Icon type="ios-close" size="25" @click="de1(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList2">
                {{item.name}}
                <Icon type="ios-close" size="25" @click="de2(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList3">
                {{item.name}}
                <Icon type="ios-close" size="25" @click="de3(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList4">
                {{item.value}}
                <Icon type="ios-close" size="25" @click="de4(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList5">
                {{item.value}}
                <Icon type="ios-close" size="25" @click="de5(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList6">
                {{item.value}}
                <Icon type="ios-close" size="25" @click="de6(item,index)"/>
              </span>
              <span class="spn span0" v-for="(item,index) in allowList7">
                {{item.name}}
                <Icon type="ios-close" size="25" @click="de7(item,index)"/>
              </span>
            </div>
          </i-col>
        </Row>
      </div>
    </div>
    <div class="journalList">
      <Row :gutter="16" style="padding-bottom: 20px">
        <i-col class="col" span="12" v-for="data in data">
          <journalList :data="data"></journalList>
        </i-col>
      </Row>
    </div>
    <!--Vue组件-->
    <div class="page">
      <paging :all="all" @returnValue="returnValue"></paging>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import tag from '../module/Tag'
  import journalList from '../module/journalList'
  import paging from '../module/paging'

  export default {
    components: {
      carousel, tag, journalList, paging
    },
    data() {
      return {
        isActive: -1,
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        all1: {
          name: '全部',
          isActive: false,
        },
        all2: {
          name: '全部',
          isActive: false,
        },
        all3: {
          name: '全部',
          isActive: false,
        },
        all4: {
          name: '全部',
          isActive: false,
        },
        all5: {
          name: '全部',
          isActive: false,
        },
        /*期刊专业*/
        JournalProfessional: [],
        allowList1: [],
        /*刊发周期*/
        period: [],
        allowList4: [],
        /*期刊等级*/
        grade: [],
        allowList5: [],
        /*影响因子*/
        factorInfluence: [],
        allowList6: [],
        /*期刊核心*/
        coreJournals: [],
        allowList7: [],
        /*内科学*/
        internalMedicine: [],
        within: false,
        allowList2: [],
        /*外科学*/
        chirurgery: [],
        outer: false,
        allowList3: [],
        /*分页*/
        all: 1,
        cur: 1,
        /*期刊列表*/
        data: [],

        idx: -1,
        object: {
          combinedIf: [],
          level: [],
          publicationCycle: [],
          cId: [],
          dbId: [],
        },
      }
    },
    mounted() {
      this.dataArray();
    },
    methods: {
      returnValue(data) {
        this.cur = data;
        this.post()
      },
      dataArray() {
        /*期刊专业*/
        this.$axios.get(this.$api.url + "/periodicals/category/list/0").then((res) => {
          this.JournalProfessional = res.data.data
        });
        /*刊发周期、期刊等级、影响因子*/
        this.$axios.get(this.$api.url + "/dictionary/List").then((res) => {
          this.period = res.data.publication_cycle;
          this.grade = res.data.level;
          this.factorInfluence = res.data.combined_if
        });
        /*期刊核心*/
        this.$axios.get(this.$api.url + "/periodicals/db/AllPeriodicalsDb").then((res) => {
          this.coreJournals = res.data
        });
        this.post()
      },
      post() {
        let _this = this;
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(this.object),
          url: this.$api.url + '/periodicals/list/where/' + this.cur,
        }).then((res) => {
          _this.all = res.data.totalPage;
          _this.data = res.data.lists;
        })
      },
      replacement() {
        for (let i in this.JournalProfessional) {
          this.JournalProfessional[i].isActive = false;
        }
        for (let i in this.period) {
          this.period[i].isActive = false;
        }
        for (let i in this.grade) {
          this.grade[i].isActive = false;
        }
        for (let i in this.internalMedicine) {
          this.internalMedicine[i].isActive = false;
        }
        for (let i in this.chirurgery) {
          this.chirurgery[i].isActive = false;
        }
        for (let i in this.coreJournals) {
          this.coreJournals[i].isActive = false;
        }
        this.isActive = -1;

        this.allowList1 = [];
        this.allowList2 = [];
        this.allowList3 = [];
        this.allowList4 = [];
        this.allowList5 = [];
        this.allowList6 = [];
        this.allowList7 = [];

        this.all1.isActive = false;
        this.all2.isActive = false;
        this.all3.isActive = false;
        this.all4.isActive = false;
        this.all5.isActive = false;
      },
      OK() {
        /*期刊专业*/
        this.object.cId = [];
        for (let a = 0; this.allowList1.length > a; a++) {
          this.object.cId.push(this.allowList1[a].id)
        }
        for (let b = 0; this.allowList2.length > b; b++) {
          this.object.cId.push(this.allowList2[b].id)
        }
        for (let c = 0; this.allowList3.length > c; c++) {
          this.object.cId.push(this.allowList3[c].id)
        }
        this.object.cId = [...new Set(this.object.cId)];
        /*发刊周期 publicationCycle*/
        this.object.publicationCycle = [];
        for (let e = 0; this.allowList4.length > e; e++) {
          this.object.publicationCycle.push(this.allowList4[e].id)
        }
        this.object.publicationCycle = [...new Set(this.object.publicationCycle)];
        /*期刊等级  level*/
        this.object.level = [];
        for (let f = 0; this.allowList5.length > f; f++) {
          this.object.level.push(this.allowList5[f].id)
        }
        this.object.level = [...new Set(this.object.level)];
        /*影响因子 combinedIf*/
        this.object.combinedIf = [];
        for (let f = 0; this.allowList6.length > f; f++) {
          this.object.combinedIf.push(this.allowList6[f].value)
        }
        this.object.combinedIf = [...new Set(this.object.combinedIf)];
        /*期刊核心*/
        this.object.dbId = [];
        for (let f = 0; this.allowList7.length > f; f++) {
          this.object.dbId.push(this.allowList7[f].id)
        }
        this.object.dbId = [...new Set(this.object.dbId)];
        this.post()
      },
      /*选择单个的*/
      selected1(item, index) {
        item.isActive = !item.isActive;
        if (item.name != "内科学" && item.name != "外科学") {
          this.allowList1 = [];
          for (let i = 0; this.JournalProfessional.length > i; i++) {
            if (this.JournalProfessional[i].isActive == true) {
              this.allowList1.push(this.JournalProfessional[i]);
              this.allowList1 = [...new Set(this.allowList1)];
            }
          }
        } else {
          item.isActive = false;
          if (item.name == "内科学") {
            this.$axios.get(this.$api.url + "/periodicals/category/list/" + item.id).then((res) => {
              if (res.data.data.length > 0) {
                this.within = !this.within;
                this.outer = false;
                this.internalMedicine = res.data.data
              }
            });
          }
          if (item.name == "外科学") {
            this.$axios.get(this.$api.url + "/periodicals/category/list/" + item.id).then((res) => {
              if (res.data.data.length > 0) {
                this.outer = !this.outer;
                this.within = false;
                this.chirurgery = res.data.data
              }
            });
          }
        }
      },
      selected2(item, index) {
        item.isActive = !item.isActive;
        this.allowList2 = [];
        for (let i = 0; this.internalMedicine.length > i; i++) {
          if (this.internalMedicine[i].isActive == true) {
            this.allowList2.push(this.internalMedicine[i]);
            this.allowList2 = [...new Set(this.allowList2)];
          }
        }
      },
      selected3(item, index) {
        item.isActive = !item.isActive;
        this.allowList3 = [];
        for (let i = 0; this.chirurgery.length > i; i++) {
          if (this.chirurgery[i].isActive == true) {
            this.allowList3.push(this.chirurgery[i]);
            this.allowList3 = [...new Set(this.allowList3)];
          }
        }
      },
      selected4(item, index) {
        item.isActive = !item.isActive;
        this.allowList4 = [];
        for (let i = 0; this.period.length > i; i++) {
          if (this.period[i].isActive == true) {
            this.allowList4.push(this.period[i]);
            this.allowList4 = [...new Set(this.allowList4)];
          }
        }
      },
      selected5(item, index) {
        item.isActive = !item.isActive;
        this.allowList5 = [];
        for (let i = 0; this.grade.length > i; i++) {
          if (this.grade[i].isActive == true) {
            this.allowList5.push(this.grade[i]);
            this.allowList5 = [...new Set(this.allowList5)];
          }
        }
      },
      selected6(item, index) {
        this.isActive = index;
        this.allowList6 = [];
        this.allowList6.push(item);
      },
      selected7(item, index) {
        item.isActive = !item.isActive;
        this.allowList7 = [];
        for (let i = 0; this.coreJournals.length > i; i++) {
          if (this.coreJournals[i].isActive == true) {
            this.allowList7.push(this.coreJournals[i]);
            this.allowList7 = [...new Set(this.allowList7)];
          }
        }
      },
      /*删除每一个*/
      de1(item, index) {
        item.isActive = false;
        this.allowList1.splice(index, 1)
      },
      de2(item, index) {
        item.isActive = false;
        this.allowList2.splice(index, 1)
      },
      de3(item, index) {
        item.isActive = false;
        this.allowList3.splice(index, 1)
      },
      de4(item, index) {
        item.isActive = false;
        this.allowList4.splice(index, 1)
      },
      de5(item, index) {
        item.isActive = false;
        this.allowList5.splice(index, 1)
      },
      de6(item, index) {
        this.isActive = -1;
        this.allowList6.splice(index, 1)
      },
      de7(item, index) {
        item.isActive = false;
        this.allowList7.splice(index, 1)

      },
      /*全部的操作*/
      allClick1() {
        this.all1.isActive = !this.all1.isActive;
        if (this.all1.isActive == true) {
          for (let i in this.JournalProfessional) {
            if (this.JournalProfessional[i].name == "内科学" || this.JournalProfessional[i].name == "外科学") {
            } else {
              this.JournalProfessional[i].isActive = true;
              this.allowList1.push(this.JournalProfessional[i]);
            }
          }
        } else {
          for (let i in this.JournalProfessional) {
            this.JournalProfessional[i].isActive = false;
          }
          this.allowList1 = []
        }
      },
      allClick2() {
        this.all2.isActive = !this.all2.isActive;
        if (this.all2.isActive == true) {
          for (let i in this.period) {
            this.period[i].isActive = true;
            this.allowList4.push(this.period[i]);
          }
        } else {
          for (let i in this.period) {
            this.period[i].isActive = false;
          }
          this.allowList4 = []
        }
      },
      allClick3() {
        this.all3.isActive = !this.all3.isActive;
        if (this.all3.isActive == true) {
          for (let i in this.grade) {
            this.grade[i].isActive = true;
            this.allowList5.push(this.grade[i]);
          }
        } else {
          for (let i in this.grade) {
            this.grade[i].isActive = false;
          }
          this.allowList5 = []
        }
      },
      allClick5() {
        this.all5.isActive = !this.all5.isActive;
        if (this.all5.isActive == true) {
          for (let i in this.coreJournals) {
            this.coreJournals[i].isActive = true;
            this.allowList7.push(this.coreJournals[i]);
          }
        } else {
          for (let i in this.coreJournals) {
            this.coreJournals[i].isActive = false;
          }
          this.allowList7 = []
        }
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 20px 0;
    border: 1px solid #ccc;
    border-bottom: none;
  }

  .wrapper .line {
    border-bottom: 1px solid #ccc;
  }

  .JournalProfessional {
    padding: 5px 10px;
    display: inline-block;
  }

  .journalList {
    padding-bottom: 20px;
  }

  .col {
    padding-bottom: 20px;
  }

  .spn1 {
    cursor: pointer;
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
  }

  .spn1:hover {
    color: rgb(0, 102, 255);
    border: 1px solid rgb(0, 102, 255);
  }

  .label > .spn {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 5px
  }

  .label > .spn:hover {
    color: rgb(0, 102, 255);
    border: 1px solid rgb(0, 102, 255);
  }

  .span0 {
    padding: 5px 0px 5px 15px !important;
  }

  .active {
    color: rgb(0, 102, 255) !important;
    border: 1px solid rgb(0, 102, 255) !important;
  }
</style>
